<template>
  <div class="shop-com">
    <div v-show="showDelete" class="list-item-delete  ">
      <span class="pull_left">{{ item.text }}</span>
      <span class="pull_right" @click.stop="deleteCurItem(item, index)"
        >删除</span
      >
    </div>
    <div v-if="item.stylesType == 0">
      <!--未添加商品时默认样式++++风格一-->
      <div v-if="!item.shopId.length" class="styleOne ">
        <div class="item ">
          <img :src="Images.defaultImg" class="shopImg" />
          <div class="text">
            <p>商品名称</p>
            <span class="money_present">
              <span class="f_s_15">￥</span>400.00</span
            >
            <span class="money_Original">￥600.00</span>
            <img :src="Images.shoplogo" class="iconShop" />
          </div>
        </div>
        <div class="item ">
          <img :src="Images.defaultImg" class="shopImg" />
          <div class="text">
            <p>商品名称</p>
            <span class="money_present">
              <span class="f_s_15">￥</span>400.00</span
            >
            <span class="money_Original">￥600.00</span>
            <img :src="Images.shoplogo" class="iconShop" />
          </div>
        </div>
      </div>
      <!--添加商品之后-->
      <div v-else class="styleOne ">
        <div
          v-for="(chooseItem, chooseIndex) in item.shopId"
          :key="chooseIndex"
          class="item "
        >
          <div class="shopImg">
            <img :src="chooseItem.src" class="shopImg" />
          </div>
          <div class="text">
            <p>{{ chooseItem.goods_name }}</p>
            <p class="money_Original" style="height:16px;margin-bottom:0;">
              ￥{{ chooseItem.goods_price }}
            </p>
            <span class="money_present">
              <span>￥</span>{{ chooseItem.low_goods_price }}</span
            >
            <!-- <span class="money_Original">￥{{ chooseItem.goods_price }}</span> -->
            <img :src="Images.shoplogo" class="iconShop" />
          </div>
        </div>
      </div>
    </div>
    <div v-else-if="item.stylesType == 1">
      <!--未添加商品时默认样式++++风格二-->
      <div v-if="!item.shopId.length" class="styleTwo ">
        <div class="item ">
          <div class="shopImg">
            <img :src="Images.defaultImg" class="shopImg" />
          </div>
          <div class="text">
            <p>商品名称</p>
            <span class="money_present">
              <span class="f_s_15">￥</span>400.00</span
            >
            <span class="money_Original">￥600.00</span>
            <img :src="Images.shoplogo" class="iconShop" />
          </div>
        </div>
      </div>
      <!--添加商品之后-->
      <div v-else class="styleTwo ">
        <div
          v-for="(shopitem, shopindex) in item.shopId"
          :key="shopindex"
          class="item "
        >
          <div class="shopImg">
            <img :src="shopitem.src" class="shopImg" />
          </div>
          <div class="text">
            <p>{{ shopitem.goods_name }}</p>
            <span class="money_present">
              <span class="f_s_15">￥</span>
              {{ shopitem.low_goods_price }}</span
            >
            <span class="money_Original">￥{{ shopitem.goods_price }}</span>
            <img :src="Images.shoplogo" class="iconShop" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Images } from "../../data";

export default {
  props: {
    item: {
      type: Object,
      default: () => {}
    },
    index: {
      type: Number,
      default: -1
    },
    showDelete: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      Images
    };
  },
  methods: {
    deleteCurItem(e, i) {
      this.$emit("deleteCurItem", e, i);
    }
  }
};
</script>

<style lang="scss" scoped>
.shop-com {
  position: relative;
  .styleOne {
    padding: 10px 10px 0 10px;
    display: flex;
    flex-wrap: wrap;
    .item {
      width: 50%;
      padding-bottom: 10px;

      div.shopImg {
        width: 172px;
        height: 172px;
        overflow: hidden;
        background-color: #fff;
        line-height: 172px;
      }
      img.shopImg {
        width: 100%;
        display: inline-block;
        vertical-align: middle;
      }
      .text {
        background-color: #ffffff;
        padding: 10px;
        width: 172px;
        margin: 0 !important;

        p {
          width: 100%;
          height: 34px;
          font-size: 12px;
          color: #999999;
          margin-bottom: 16px;
          display: -webkit-box !important;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: break-all;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        span.money_present {
          font-size: 16px;
          color: #fc4045;
        }
        .money_Original {
          font-size: 10px;
          color: #999999;
          text-decoration: line-through;
        }
        img {
          float: right;
        }
      }
    }
    .item:nth-child(odd) {
      padding-right: 5px;
    }
    .item:nth-child(even) {
      padding-left: 5px;
    }
  }
  .styleTwo {
    .item {
      margin-bottom: 2px;
      background-color: #fff;
      height: 88px;
      padding: 10px;
      .text {
        float: left;
        padding-left: 10px;
        height: 70px;
        width: 280px;
        margin: 0 !important;
        line-height: 20px !important;
        font-size: 12px !important;
        p {
          font-size: 12px;
          color: #999999;
          height: 50px;
        }
        .money_present {
          font-size: 16px;
          color: #fc4045;
        }
        .money_Original {
          font-size: 10px;
          color: #999999;
          text-decoration: line-through;
        }
        img {
          float: right;
        }
      }
      div.shopImg {
        width: 70px;
        height: 70px;
        overflow: hidden;
        float: left;
      }
      img.shopImg {
        width: 70px;
        height: 70px;
      }
    }
  }
}
</style>
